<template>
	<view class="layout">
		<navigator url="/pages/function/share_device" hover-class="none">
			<view class="share">
				<view class="title">
					{{$t('shareList.shareTo')}}
				</view>
				<view class="right">
					<view class="add">
						{{$t('shareList.add')}}
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
		</navigator>
		<view class="has_shared">
			{{$t('shareList.sharedUser')}}
		</view>
		<view class="share_item" v-for="(item,index) in dataList" :key="index">
			<view class="left">
				<view class="item-icon">
					<image class="icon-img" :src="item.headUrl" mode="aspectFill"></image>
				</view>
				<view class="item-title">
					{{item.user_acc}}
				</view>
			</view>
			<view class="clear_fence" @click="deleteAlert(index)">
				<uni-icons class="delete" type="clear" color="#53786C" size="26"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import{onLoad,onShow} from "@dcloudio/uni-app";
	import { apiUserDeleteSharedUser, apiUserGetSharedDeviceList } from '../../api/user_api';
	import { getImei } from '../../utils/user_tools';
	import { i18nTool } from '../../utils/i18en';
	const dataList = ref([]);
	var parma = null;
	
	onShow(()=>{
		getShareList()
	})
	
	//分享列表
	async function getShareList(){
		let res = await apiUserGetSharedDeviceList({imei:getImei()});
		dataList.value = res.content;
	}
   function deleteAlert(index){
		uni.showModal({
			cancelColor: "#606060",
			cancelText: i18nTool('shareList.cancel'),
			confirmText: i18nTool('shareList.confirm'),
			confirmColor: "#18bc37",
			title: i18nTool('shareList.hint'),
			content: i18nTool('shareList.hintContent'),
			success(res) {
				if (res.confirm) {
					
					deleteShare(index);
				} else {
		
				}
		
			}
		
		})
	}
	async function deleteShare(index){
		let data = dataList.value[index];
	
		 parma = {
			imei:data.imei,
			targetUser:data.userAcc,
		}
		let res = await apiUserDeleteSharedUser(parma);
		uni.showToast({
			title:i18nTool('shareList.delSuccess'),
			icon:"none"
		})
		getShareList();
	}
	
	
	

</script>

<style lang="scss" scoped>
	.layout{
		.share{
			margin: 30rpx 30rpx;
			padding: 20rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				color: #333;
				font-size: 30rpx;
			}
			.right{
				display: flex;
				align-items: center;
				justify-content: start;
				.add{
					font-size: 28rpx;
					color: #666;
				}
			}
			
		}
		.has_shared{
			margin: 0rpx 30rpx;
			padding: 20rpx 20rpx;
			font-size: 28rpx;
			color: #666;
		}
		.share_item{
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 20rpx;
			margin: 10rpx 30rpx;
			padding: 10rpx 20rpx;
			.left {
				display: flex;
				align-items: center;
				justify-content: space-between;
			
				.item-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					.icon-img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			
				.item-title {
					font-size: 30rpx;
					padding-left: 20rpx;
				}
			}
		}
	}
</style>
